<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/general.xhtml">
        
        <ui:define name="title"><h:outputText value="Welding" /></ui:define>

        <ui:define name="head">
            <script type="application/javascript" src="#{request.contextPath}/js/charts/topCustomers.js" />
            <script type="application/javascript" src="#{request.contextPath}/js/highcharts/modules/heatmap.js" />
            <script type="application/javascript" src="#{request.contextPath}/js/highcharts/modules/exporting.js" />
            <script type="application/javascript" src="#{request.contextPath}/js/charts/productsPerMonth.js" />
        </ui:define>

        <ui:define name="content">

            <h:form>

                <p:remoteCommand actionListener="#{chartService.refreshInvoices()}" autoRun="true" />

                <p:outputPanel deferred="false" deferredMode="visible">

                    <div id="mainContainer" class="pull-left">
                        <div id="topCustomers"></div>
                        <div style="height:50px"></div>
                        <div id="productsPerMonth"></div>
                    </div>
                    <div id="rightPanel" class="pull-left">
                        <h:outputText value="Current month earnings" style="font-weight: bold;"/>
                        <div class="well well-sm">
                            <h:outputText value="€0" style="font-weight: bold; font-size: 1.5em" />
                        </div>
                    </div>
                </p:outputPanel>

                <h:inputHidden id="topCustomersData" value="#{chartService.top10Customers}" />
                <h:inputHidden id="monthList" value="#{chartService.monthList}" />
                <h:inputHidden id="productList" value="#{chartService.productList}" />

            </h:form>

        </ui:define>
        
</ui:composition>